<template>
	<view>
		<view class="top">
			<view style="height: 88rpx;"></view>
			<view class="top_er">
				<view class="er_a" v-for="(item,index) in tList" @click="dianji(index)"
					:class="active == index?'er_b':'er_a'">
					<view class="text">{{item.name}}</view>
					<view class="xian"></view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list_top">
				<view class="back" v-for="(item,index) in dataList">
					<view class="list_a mb_16">
						<view class="flex align_items_center">
							<image class="tximage" :src="item.user.avatar||url + '/me/ht.png'" mode=""></image>
							<view class="cl_00091A f_32 fw_bold ml_8">{{item.user.nickname}}</view>
						</view>
						<!-- <view class="cl_CCCED1 f_24">{{item.createtime | formatDate}}</view> -->
					</view>
					<view class="flex align_items_center mb_16">
						<view class="list_b_b cl_fff f_20">{{item.type_text}}</view>
						<view class="cl_00091A f_32 fw_bold ml_8">{{item.title}}</view>
					</view>
					<view class="cl_333A47 f_28 mb_24">
						{{item.des_content}}
					</view>
					<view style="margin-bottom: 24rpx;" v-if="item.img_image.join(',')">
						
						<image class="image_t" :src="items" mode="widthFix" v-for="(items,indexs) in item.img_image"></image>
					</view>
					<!-- <view class="list_c cl_fff f_28" @click="lianxi(index)">联系</view> -->
				</view>
			</view>
		</view>
		<view class="bottom" @click="to_next()">
			<image class="img_124" :src="fabu+'/imgs/looking/fabu.png'" mode=""></image>
		</view>
		<u-popup :show="show" :round="10" mode="center" @close="close">
			<view class="tc">
				<view class="cl_00091A f_32 jz mb_48">联系电话</view>
				<view class="cl_3377FF f_52 jz mb_64 fw_bold">{{phone}}</view>
				<view class="flex f_32">
					<view class="anniu cl_333A47 mr_24" @click="close()">取消</view>
					<view class="anniu2 cl_fff" @click="call()">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tList: [{
					name: "全部"
				}, {
					name: "招领"
				}, {
					name: "找回"
				}],
				active: 0,
				show: false,
				dataList: [],
				phone: 12345678900,
				page: 1,
				pagesize: 10,
				fabu:this.$.ajax_url2,
				url:'',
			};
		},
		onShow() {
			this.list(1)
		},
		onLoad() {
			this.url = this.$.ajax_url2;
		},
		onReachBottom() {
		  if (this.page * this.pagesize > this.dataList.length) return;
		  this.status = "loading";
		  this.page = ++this.page;
		  setTimeout(() => {
		    this.list(2);
		    if (this.page * this.pagesize > this.dataList.length)
		      this.status = "nomore";
		    else this.status = "loading";
		  }, 1000);
		},
		methods: {
			dianji(index) {
				this.active = index
				this.page =1
				// this.type = 0
				this.list(1)
			},
			close() {
				this.show = false
			},
			to_next() {
				uni.navigateTo({
					url: '/pages/looking/addlooking'
				})
			},
			list(e) {
				this.$.ajax(1, "POST", "lost/list", {
					type: this.active,
					page: this.page,
					pagesize: this.pagesize
				}, (res) => {
					if(e==1){
						this.dataList=res.data
					}else{
						this.dataList = [...this.dataList, ...res.data];
					}
				})
			},
			lianxi(index) {
				this.show = true
				this.phone = this.dataList[index].phone
				console.log(this.dataList[index].phone);
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phone
				});
			},
		},
		filters: {
			formatDate: function(value) {
				var date = new Date(value); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate() + ' ';
				var h = date.getHours() + ':';
				var m = date.getMinutes() + ':';
				var s = date.getSeconds();
				return M + D + h + m + s;
			}
		},
	};
</script>

<style lang="scss">
	page {
		background-color: #F7FAFF;
	}

	.top {
		width: 750rpx;
		height: 176rpx;
		background-color: #F7FAFF;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;

		.top_er {
			width: 686rpx;
			padding: 0 32rpx;
			display: flex;

			.er_a {
				width: 80rpx;
				height: 70rpx;
				margin-right: 48rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					font-weight: 500;
					font-size: 32rpx;
					color: #999999;
				}

				.xian {
					width: 40rpx;
					height: 6rpx;
					background: #F7FAFF;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
				}
			}

			.er_b {
				width: 80rpx;
				height: 70rpx;
				margin-right: 48rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.text {
					font-weight: bold;
					font-size: 40rpx;
					color: #111111;
					line-height: 64rpx;
				}

				.xian {
					width: 40rpx;
					height: 6rpx;
					background: #3377FF;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
				}
			}
		}
	}

	.list {
		margin-top: 200rpx;
	}

	.list_top {
		min-height: 60vh;
	}

	.list_bottom {}

	.back {
		width: 638rpx;
		// height: 876rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-left: 32rpx;
		margin-bottom: 24rpx;
	}


	.list_a {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.list_b_b {
		width: 100rpx;
		height: 44rpx;
		background: #3377FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 44rpx;
	}

	.list_c {
		width: 638rpx;
		height: 76rpx;
		background: #3377FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 76rpx;
	}

	.bottom {
		position: fixed;
		bottom: 108rpx;
		right: 26rpx;

	}

	.tc {
		padding: 40rpx 32rpx;
	}

	.anniu {
		width: 298rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.anniu2 {
		width: 298rpx;
		height: 100rpx;
		background: #3377FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.image_t {
		width: 480rpx;

	}

	.tximage {
		width: 64rpx;
		height: 64rpx;
		border-radius: 100rpx;
	}
</style>